<template>
    <div class="cont">
        <nav-bar title="入群欢迎语" rightImg="https://h5.dhcc.wang/newprogram/wxRobot/nav_refresh_black.png" :bgStyle="bgStyle"
            text-color="#333333" :rotate.sync="reload" @leftClick="back" @rightClick="refresh" />
        <main class="main">
            <div class="group m-t-20" v-if="list && list.length > 0">
                <div class="m-lr-12 m-b-20 box-shadow-new radius8" v-for="(item, index) in list" :key="item.id">
                    <div class="comment">
                        <img src="https://img.alicdn.com/imgextra/i4/O1CN011kIz9H1xwiPaHnhNs_!!6000000006508-2-tps-78-54.png" class="summary">
                        {{ item.welcome ||
                        '尚未设置欢迎语' }}
                        <div class="flex align-center justify-end m-t-20">
                            <img class="m-r-10 radius4" width="24"
                                :src="item.small_head_img_url || 'https://h5.dhcc.wang/images/default_avatar.png'" alt="">
                            <div class="title van-ellipsis font-12">
                                {{ item.nick_name }}
                            </div>
                    </div>
                    </div>
                    <div class="flex justify-between van-hairline--top p-tb-12 p-lr-12">
                        <div class="flex align-center">
                            <div class="flex align-center" @click="addWelcome(item, index)"><van-icon class="m-t-4 m-r-5"
                                    name="edit" style="top:-2px"/>{{ item.welcome ?
                                        '编辑' : "新建欢迎语" }}
                            </div>
                            <div class="flex align-center m-l-30" v-if="item.welcome" @click="clearWelcome(item, index)">
                                <van-icon class="m-t-4 m-r-5" name="delete-o" style="top:-2px"/>清空
                            </div>
                        </div>
                        <div class="flex align-center">
                            {{ item.is_welcome ? '已开启' : "未启用" }}
                            <van-switch class="m-l-10" v-model="item.is_welcome" size="22"
                                :active-color="config.mac_assist_color" @change="confrim(1, item)" />
                        </div>
                    </div>
                </div>
            </div>
            <noData v-else text="暂无激活的群" />
        </main>
        <!-- 欢迎语 -->
        <van-popup v-model="showWelcome" position="bottom" close-on-popstate round>
            <div class="p-20">
                <div class="text-center m-b-20 font-16 text-bold">{{ welcome ? '修改欢迎语' : '创建欢迎语' }}</div>
                <van-field class="bg-grey replay-content radius8" v-model="welcome"
                    :autosize="{ maxHeight: 300, minHeight: 150 }" :border="false" maxlength="500" type="textarea"
                    placeholder="请设置欢迎语（每次登录云发单后，需等待15分钟后欢迎语生效！）" />
                <div @click="confrim(2, welcomeData)"
                    class="bottom-btn m-t-20 p-t-10 p-b-10 text-center color-white"
                    :class="welcome ? 'bg-green' : 'bg-c'">保存设置</div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { Switch, Field, Checkbox, Popup, Dialog } from 'vant'
export default {
    components: {
        [Switch.name]: Switch,
        [Field.name]: Field,
        [Checkbox.name]: Checkbox,
        [Popup.name]: Popup,
        [Dialog.name]: Dialog
    },
    data () {
        return {
            config: this.$DB.get('robotCfg'),
            reload: false,
            bgStyle: '#fff',
            list: [],
            welcome: '',
            showWelcome: false,
            welcomeData: {}
        }
    },
    mounted () {
        this.setHeader()
        this.getList()
    },
    methods: {
        getList (loading) {
            if (this.tabIndex == 1) {
                setTimeout(() => {
                    this.reload = false
                }, 300)
                return
            }
            this.$api.getListGroup({ group_type: 2, status: 1, page: 1, pagesize: 30 }, loading).then(async res => {
                if (loading) {
                    this.list = []
                    this.checked = ''
                }
                if (res.code != 1) {
                    return this.$toast(res.msg)
                }
                console.log(res.data)
                this.list = res.data.list
            }).finally(() => {
                setTimeout(() => {
                    this.reload = false
                }, 300)
            })
        },
        refresh () {
            this.reload = true
            this.getList(true)
        },
        back () {
            this.$router.go(-1)
        },
        setHeader () {
            this.$common.setHeader({
                native_headershow: 0,
                topstyle: 'topcolor',
                native_top_words_color: '#ffffff',
                str_link_color: '#ffffff',
                end_link_color: '#ffffff'
            })
        },
        // 欢迎语
        addWelcome (item, index) {
            this.showWelcome = true
            this.welcomeData = item
            this.welcome = item.welcome
            this.welcomeData.index = index
        },
        // 清空欢迎语
        clearWelcome (item, index) {
            this.welcomeData = item
            this.welcome = ''
            this.welcomeData.index = index
            if (item.is_welcome) {
                return this.$toast('开启中不支持清空！')
            }
            Dialog.confirm({
                title: '温馨提示',
                message: '确定要清空该群的欢迎语吗？'
            })
                .then(() => {
                    this.confrim(3, item)
                })
                .catch(() => {
                    // on cancel
                })
        },
        confrim (type, item = {}) {
            if (item) {
                this.welcomeData = item
            }
            let obj = {
                username: this.welcomeData.user_name
            }
            if (type == 1) {
                if (item.is_welcome && !item.welcome) {
                    item.is_welcome = false
                    return this.$toast('请先创建欢迎语才能开启')
                }

                obj.is_welcome = item.is_welcome ? 1 : 0
            } else {
                if (type == 2) {
                    if (!this.welcome) {
                        return this.$toast('请输入欢迎语内容')
                    }
                }
                obj.welcome = this.welcome
                obj.is_welcome = item.is_welcome
            }

            this.$api.updateWelcome(obj).then(res => {
                if (res.code != 1) {
                    return this.$toast(res.msg)
                }
                this.showWelcome = false
                this.$toast(type == 3 ? '清空成功' : '设置成功')
                if (type != 1) {
                    this.list[this.welcomeData.index].welcome = obj.welcome
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.cont {
    font-size: 14px;
    padding-top: 46px;

    .btn {
        background-image: linear-gradient(131deg, #feeac8 32%, #fad9b1 88%, #ffc99f);
        color: #672e12;
        padding: 3px 5px;
        border-radius: 30px;
        font-size: 12px;
    }
    .comment {
        background-image: linear-gradient(101deg,rgba(216,228,255,.5) 11%,rgba(225,216,255,0) 88%);
        border-radius: 6px 6px 0 0;
        padding: 20px 15px 15px;
        position: relative;
        color: #0d2357;
        .summary {
            left: 2px;
            position: absolute;
            top: -4px;
            height: 18px;
            -o-object-fit: contain;
            object-fit: contain;
        }
    }
    .bottom-btn {
        border-radius: 40px;
    }
}
</style>